// 设备列表 面板
import React from 'react';
import './deviceList.scss';
import cookie from 'react-cookies';
import BreadcrumbNav from '../../../component/breadcrumb/breadcrumb.js';
import { List,Collapse } from 'antd';
import BarrierGate from '../../../component/progress/progress.js';
import { categoryList} from '../../../api/deviceLibrary'
import DeviceListDetail from '../deviceListDetail/deviceListDetail'
import {withRouter} from 'react-router-dom'
const {Panel} = Collapse
class deviceList extends React.Component {
    state = {
            list:[],
            id:'',
            cate_name: '',
            type:''
        }
    componentDidMount() {
       this.getcategoryList()
    }

    ulClick = (val) => {
        this.setState({id:val.id,cate_name:val.cate_name, type:val.type})
    }
    // 设备列表
    getcategoryList=()=>{
        let post_data = {
            'auth_token': cookie.load('station_console_setting_web_login').auth_token,
        }
        categoryList(post_data).then(res=>{
            this.setState({
                list:res.data.list
            })
        })
    }
    render() {
        const { list,id,cate_name,type } = this.state;
        return (
            // <Router>
            <div className="deviceList" id="ContentMainList">
                <div className="nav_bar_child_list">
                    <div className="title">设备分类</div>
                    <Collapse accordion bordered={false} expandIconPosition={'right'}>
                        {list.map((item)=>(
                            <Panel header={item.name} key={item.name}>
                                <List
                                    itemLayout="horizontal"
                                    dataSource={item.eq_list}
                                    renderItem={item => (
                                    <List.Item style={{cursor:'pointer'}}>
                                        <div className={id == item.id ? 'ulDot' : 'ulDot2'}></div>
                                        <List.Item.Meta
                                        className="ulTitle"
                                        onClick={this.ulClick.bind(this,item)}
                                        title={item.cate_name}
                                        description={item.detail}
                                        />
                                    </List.Item>
                                    )}
                                />
                            </Panel>
                        ))}
                    </Collapse>
                </div>
                <div className="has_list_conent">     
                    {/* 面包屑组件 */}
					<BreadcrumbNav />  
                    <div id="content-detail">
                        <BarrierGate />
                        <DeviceListDetail id={id} name={cate_name} type={type}></DeviceListDetail>
                    </div>
                </div>
            </div>
            // </Router>
        )
    }
}

export default withRouter(deviceList);